<template>
  <div class="resourcemanage">
    <Layout :style="{ padding: '0 24px 24px' }">
      <Breadcrumb :style="{ margin: '24px 0' }">
        <BreadcrumbItem to="/home"
          ><Icon type="ios-home-outline"></Icon>形拓资源网</BreadcrumbItem
        >
        <BreadcrumbItem
          ><Icon type="ios-list-box-outline" />个人中心</BreadcrumbItem
        >
        <BreadcrumbItem><Icon type="md-folder-open" />资源管理</BreadcrumbItem>
      </Breadcrumb>
      <Content
        class="usercontent"
        :style="{
          padding: '24px',
          background: '#fff'
        }"
      >
        <h2 class="title">资源管理</h2>
        <Divider />
        <div class="selectbox">
          <Tag size="large" class="tagslect1">一级索引:</Tag>
          <Select
            @on-change="SelectValue1"
            v-model="model1"
            placeholder="请选择一级索引"
            style="width:200px"
            clearable
            ref="secondslect1"
          >
            <Option
              v-for="item in firstIndexlist"
              :value="item.categoryId"
              :key="item.categoryId"
              >{{ item.categoryName }}</Option
            >
          </Select>
          <Tag size="large" class="tagslect2">二级索引:</Tag>
          <Select
            @on-change="SelectValue2"
            v-model="model2"
            placeholder="请选择二级索引"
            style="width:200px"
            clearable
            ref="secondslect2"
          >
            <Option
              v-for="item in secondIndexlist"
              :value="item.detailId"
              :key="item.detailId"
              >{{ item.detailName }}</Option
            >
          </Select>

          <Button
            type="primary"
            @click.native="SlectSearch"
            class="selectbtn"
            icon="ios-funnel"
            >筛选</Button
          >
          <Button icon="md-refresh" @click.native="ResetSelect">重置</Button>
        </div>
        <br />
        <Table
          border
          :columns="columns1"
          :data="
            resourceList.slice(
              (page.index - 1) * page.size,
              page.index * page.size
            )
          "
        >
          <template slot-scope="{ row }">
            <strong>{{ row.name }}</strong>
          </template>
          <template slot-scope="{ row, index }" slot="version">
            <Button
              type="primary"
              size="small"
              style="margin-right: 5px"
              @click="VersionDetail(index)"
              >编辑</Button
            >
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <Button
              size="small"
              style="margin-right: 0;margin-bottom:5px;margin-top:5px;"
              @click="updateIntro(index)"
              >修改详情</Button
            >
            <Button
              type="error"
              style="margin-bottom:5px;"
              size="small"
              @click="Remove(index)"
              >删除资源</Button
            >
          </template>
        </Table>
        <Page
          show-total
          show-elevator
          :total="resourceList.length"
          :current="page.index"
          :page-size="page.size"
          class="pagenation"
          @on-change="PIndexChange"
        ></Page>
      </Content>
    </Layout>
    <Modal v-model="modal1" title="版本管理" style="font-family:'PingFang'">
      <Button
        size="large"
        style="margin-right: 5px;margin-bottom:10px"
        @click="uploadVersion"
        >上传版本</Button
      >
      <Table border :columns="columns2" :data="versionList">
        <template slot-scope="{ row }">
          <strong>{{ row.name }}</strong>
        </template>
        <template slot-scope="{ row, index }" slot="versionchange">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="changeVersionFile(index)"
            >修改</Button
          >
          <Button
            type="error"
            size="small"
            style="margin-right: 5px"
            @click="deleteVersionFile(index)"
            >删除</Button
          >
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Button type="error" size="small" @click="Remove(index)">删除</Button>
        </template>
      </Table>
    </Modal>
    <Modal v-model="modal2" title="上传新版本" @on-cancel="cancelUpload">
      <p class="ptitles">选择文件</p>
      <Upload :before-upload="handleUpload" action="#" class="choicefile">
        <Button type="primary" icon="ios-cloud-upload-outline">选择文件</Button>
      </Upload>
      <div v-if="file !== null" style="text-align:center">
        {{ file.name }}
      </div>
      <p class="ptitles">输入资源版本名称</p>
      <div class="intro">
        <Input
          v-model="versionnew"
          placeholder="输入资源版本名称"
          style="width: 400px"
        />
      </div>
      <div class="progresstitle">上传进度</div>
      <div
        class="progress"
        :style="{
          backgroundImage:
            'linear-gradient(to right,#00a2ff 0%,#00a2ff ' +
            progress +
            ',#C0C7CB ' +
            progress +
            ',#C0C7CB 100%)'
        }"
      >
        {{ progress }}
      </div>
      <div slot="footer" class="modalfooter">
        <Button
          type="primary"
          size="large"
          long
          :loading="modal_loading"
          class="uploadok"
          @click="uploadNew"
          >上传</Button
        >
        <Button
          type="error"
          size="large"
          long
          class="uploadok"
          @click="cancelUpload"
          >取消上传</Button
        >
      </div>
    </Modal>
    <Modal
      v-model="modal3"
      title="修改版本资源"
      @on-cancel="cancelUpdateVersion"
    >
      <p class="ptitles">选择文件</p>
      <Upload :before-upload="handleUpload2" action="#" class="choicefile">
        <Button type="primary" icon="ios-cloud-upload-outline">选择文件</Button>
      </Upload>
      <div v-if="file2 !== null" style="text-align:center">
        {{ file2.name }}
      </div>

      <div class="progresstitle">上传进度</div>
      <div
        class="progress"
        :style="{
          backgroundImage:
            'linear-gradient(to right,#00a2ff 0%,#00a2ff ' +
            progress2 +
            ',#C0C7CB ' +
            progress2 +
            ',#C0C7CB 100%)'
        }"
      >
        {{ progress }}
      </div>
      <div slot="footer" class="modalfooter">
        <Button
          type="primary"
          size="large"
          long
          :loading="modal_loading2"
          class="uploadok"
          @click="updateVersion"
          >上传</Button
        >
        <Button
          type="error"
          size="large"
          long
          class="uploadok"
          @click="cancelUpdateVersion"
          >取消上传</Button
        >
      </div>
    </Modal>
    <Modal
      v-model="modal4"
      title="修改资源详情"
      @on-cancel="cancelUpdateIntro"
      width="660"
    >
      <div class="tags">
        <Tag size="large" class="tagslect1">一级索引:</Tag>
        <Select
          @on-change="SelectValue3"
          v-model="select1"
          placeholder="请选择新的一级索引"
          style="width:200px"
          clearable
          ref="secondslect3"
        >
          <Option
            v-for="item in firstIndexlist"
            :value="item.categoryId"
            :key="item.categoryId"
            >{{ item.categoryName }}</Option
          >
        </Select>
        <Tag size="large" class="tagslect2">二级索引:</Tag>
        <Select
          @on-change="SelectValue4"
          v-model="select2"
          placeholder="请选择新的二级索引"
          style="width:200px"
          clearable
          ref="secondslect4"
        >
          <Option
            v-for="item in secondIndexlist"
            :value="item.detailId"
            :key="item.detailId"
            >{{ item.detailName }}</Option
          >
        </Select>
      </div>
      <!-- <p class="ptitles">
        请选择新的封面图
      </p>
      <p
        class="notice"
        style="color:#2d8cf0;text-align:center;padding-bottom:10px"
      >
        (png、jpg格式)
      </p>

      <div class="firstimg"></div>
      <el-upload
        class="avatar-uploader"
        ref="upload1"
        :auto-upload="false"
        :multiple="false"
        action="/iconupload"
        :show-file-list="false"
        :on-change="imgSaveToUrl"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatarimg" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload> -->
      <p class="ptitles">输入新的资源名</p>
      <div class="intro">
        <Input
          v-model="dataname"
          placeholder="输入新的资源名"
          style="width: 400px"
        />
      </div>
      <p class="ptitles">输入新的资源简介</p>
      <div class="intro">
        <Input
          v-model="dataIntroduce"
          type="textarea"
          :rows="5"
          placeholder="输入新的资源简介"
          style="width: 400px"
        />
      </div>
      <p class="ptitles">选择轮播图片</p>
      <p
        class="notice"
        style="color:#2d8cf0;text-align:center;padding-bottom:10px"
      >
        (png、jpg格式)
      </p>
      <div class="imglist">
        <el-upload
          ref="upload3"
          action="none"
          list-type="picture-card"
          :auto-upload="false"
          :on-remove="handleRemove"
          :before-upload="beforeimgUpload"
          :on-change="OnChangepic"
          :file-list="this.imglist"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
      <div class="progresstitle">修改进度</div>
      <div
        class="progress"
        :style="{
          backgroundImage:
            'linear-gradient(to right,#00a2ff 0%,#00a2ff ' +
            progress3 +
            ',#C0C7CB ' +
            progress3 +
            ',#C0C7CB 100%)'
        }"
      >
        {{ progress3 }}
      </div>
      <div slot="footer" class="modalfooter">
        <Button
          type="primary"
          size="large"
          long
          :loading="modal_loading2"
          class="uploadok"
          @click="updateResourceIntro"
          >修改</Button
        >
        <Button
          type="error"
          size="large"
          long
          class="uploadok"
          @click="cancelUpdateIntro"
          >取消修改</Button
        >
      </div>
    </Modal>
  </div>
</template>
<script>
import UserApi from "../../api/Userapi.js";
import { type } from "os";

export default {
  data() {
    return {
      modal_loading: false,
      modal_loading2: false,
      progress: 0,
      progress2: 0,
      progress3: 0,
      modal1: false,
      modal2: false,
      modal3: false,
      modal4: false,
      page: {
        index: 1,
        size: 10,
        total: 50
      },
      columns1: [
        {
          title: "资源序号",
          key: "dataId",
          width: 120,
          resizable: true
        },
        {
          title: "资源名",
          key: "dataName",
          width: 170,
          resizable: true
        },
        {
          title: "资源大小",
          key: "dataSize",
          width: 120,
          resizable: true
        },
        {
          title: "创建时间",
          key: "dataCreateTime",
          width: 130,
          resizable: true
        },
        {
          title: "创建者",
          key: "dataCreator",
          width: 100,
          resizable: true
        },
        {
          title: "一级索引",
          key: "dataCategoryName",
          width: 100,
          resizable: true
        },
        {
          title: "二级索引",
          key: "dataDetailName",
          width: 100,
          resizable: true
        },

        {
          title: "资源简介",
          key: "dataIntroduce",
          minWidth: 300,
          resizable: true
        },
        {
          title: "资源版本",
          slot: "version",
          width: 120,
          align: "center",
          resizable: true
        },
        {
          title: "操作",
          slot: "action",
          width: 150,
          align: "center"
        }
      ],
      columns2: [
        {
          title: "版本序号",
          key: "versionId",
          resizable: true
        },
        {
          title: "版本名称",
          key: "versionName",
          resizable: true
        },
        {
          title: "操作",
          resizable: true,
          slot: "versionchange"
        }
      ],
      versionList: [],
      resourceList: [],
      maxSize: 100000,
      firstIndexlist: [],
      secondIndexlist: [],
      model1: "",
      model2: "",
      resourceId: -1,
      file: null,
      file2: null,
      versionnew: "",
      versionId: "",
      dataIntroduce: "",
      dataname: "",
      imglist: [],
      select1: "",
      select2: "",
      imageUrl: "",
      avatarimgFile: {} //封面图
    };
  },
  methods: {
    PIndexChange(i) {
      this.page.index = i;
    },

    GetAllResource() {
      //获取首页所有资源
      var allparams = new URLSearchParams();
      allparams.append("pageSize", this.maxSize);
      allparams.append("pageNum", 1);

      this.axios.post(UserApi.getAllData, allparams).then(res => {
        if (res.data.status == 0) {
          this.resourceList = res.data.data.list;
          window.console.log(this.resourceList);
          this.PIndexChange(1);
        } else {
          window.console.log("接口调用失败");
        }
      });
      this.GetFirstIndex();
    },
    GetFirstIndex() {
      //筛选器获取一级索引列表
      this.axios.get(UserApi.firstIndex).then(res => {
        if (res.data.status == 0) {
          this.firstIndexlist = res.data.data;
          window.console.log(this.model1);
        } else {
          window.console.log("获取不到一级索引");
        }
      });
    },
    SelectValue1(e) {
      //获取筛选器一级索引选中值
      this.model1 = e;
      window.console.log(this.model1);
      //级联更新二级选择器
      this.axios
        .get(UserApi.secondIndex, {
          params: {
            detailCategoryId: this.model1
          }
        })
        .then(res => {
          if (res.data.status == 0) {
            this.secondIndexlist = res.data.data;
          }
        });
      this.$refs.secondslect2.clearSingleSelect();
    },
    SelectValue2(e) {
      //获取筛选器一级索引选中值
      this.model2 = e;
      window.console.log(this.model2);
    },
    SlectSearch() {
      if (this.model1.length !== 0 && this.model2.length !== 0) {
        this.axios
          .get(UserApi.secondResource, {
            params: {
              detailId: this.model2,
              pageSize: this.maxSize,
              pageNum: 1
            }
          })
          .then(res => {
            if (res.data.status == 0) {
              if (res.data.data.list.length !== 0) {
                this.resourceList = res.data.data.list;
                window.console.log(this.resourceList);
                this.PIndexChange(1);
              } else {
                this.resourceList = [];
              }
            } else {
              window.console.log("筛选失败");
              this.$Message.error("筛选失败，接口错误！");
            }
          });
      } else if (this.model1.length !== 0 && this.model2.length === 0) {
        this.axios
          .get(UserApi.firstResource, {
            params: {
              categoryId: this.model1,
              pageSize: this.maxSize,
              pageNum: 1
            }
          })
          .then(res => {
            if (res.data.status == 0) {
              if (res.data.data.list.length !== 0) {
                this.resourceList = res.data.data.list;
                window.console.log(this.resourceList);
                this.PIndexChange(1);
              } else {
                this.resourceList = [];
              }
            } else {
              window.console.log("筛选失败");
              this.$Message.error("筛选失败，接口错误！");
            }
          });
      } else {
        this.GetAllResource();
      }
    },
    ResetSelect() {
      //重置筛选框
      this.$refs.secondslect1.clearSingleSelect();
      this.$refs.secondslect2.clearSingleSelect();
      this.GetAllResource();
    },
    VersionDetail(index) {
      //获取版本列表
      var curentpageresource = this.resourceList.slice(
        (this.page.index - 1) * this.page.size,
        this.page.index * this.page.size
      );
      var dataId = curentpageresource[index].dataId;
      this.resourceId = dataId;
      this.axios
        .get(UserApi.getDataDetail, { params: { dataId: dataId } })
        .then(res => {
          if (res.data.status == 0) {
            if (res.data.data[0].dataVersionList.length !== 0) {
              this.versionList = res.data.data[0].dataVersionList;
            } else {
              this.versionList = [];
            }
            window.console.log(this.versionList);
          } else {
            this.$Message.error("版本获取失败");
          }
        });
      this.modal1 = true;
    },
    deleteVersionFile(index) {
      this.axios
        .get(UserApi.deleteVersion, {
          params: { versionId: this.versionList[index].versionId }
        })
        .then(res => {
          if (res.data.status == 0) {
            this.$Message.success("删除版本成功");
            this.reloadVersion();
          } else {
            this.$Message.error("删除版本失败");
          }
        });
    },

    changeVersionFile(index) {
      this.versionId = this.versionList[index].versionId;
      this.modal3 = true;
    },
    reloadVersion() {
      //更新版本列表
      this.axios
        .get(UserApi.getDataDetail, { params: { dataId: this.resourceId } })
        .then(res => {
          if (res.data.status == 0) {
            if (res.data.data[0].dataVersionList.length !== 0) {
              this.versionList = res.data.data[0].dataVersionList;
            } else {
              this.versionList = [];
            }
            window.console.log(this.versionList);
          } else {
            this.$Message.error("版本获取失败");
          }
        });
    },
    Remove(index) {
      //删除资源
      //当前页资源列表
      this.$Modal.confirm({
        title: "确定删除吗",
        content: "<p>删除后不可恢复</p>",
        onOk: () => {
          var curentpageresource = this.resourceList.slice(
            (this.page.index - 1) * this.page.size,
            this.page.index * this.page.size
          );
          this.resourceId = curentpageresource[index].dataId;
          this.axios
            .get(UserApi.deleteSource, {
              params: {
                dataId: curentpageresource[index].dataId
              }
            })
            .then(res => {
              if (res.data.status == 0) {
                window.console.log("删除成功", res);
                this.$Message.success("删除资源成功");
                this.SlectSearch();
                //刷新列表
              } else {
                this.$Message.error("删除资源失败");
              }
            });
        },
        onCancel: () => {
          this.$Message.info("取消删除");
        }
      });
    },
    updateIntro(index) {
      this.modal4 = true;
      var curentpageresource = this.resourceList.slice(
        (this.page.index - 1) * this.page.size,
        this.page.index * this.page.size
      );
      this.resourceId = curentpageresource[index].dataId;
      //获取选中的一二级索引
      this.axios.get(UserApi.firstIndex).then(res => {
        if (res.data.status == 0) {
          this.firstIndexlist = res.data.data;
          window.console.log(this.firstIndexlist);
          for (var i in this.firstIndexlist) {
            if (
              this.firstIndexlist[i].categoryName ===
              curentpageresource[index].dataCategoryName
            ) {
              this.select1 = this.firstIndexlist[i].categoryId;
              window.console.log(this.select1);
              //级联更新二级选择器
              this.axios
                .get(UserApi.secondIndex, {
                  params: {
                    detailCategoryId: this.select1
                  }
                })
                .then(res => {
                  if (res.data.status == 0) {
                    this.secondIndexlist = res.data.data;
                    for (var z in this.secondIndexlist) {
                      if (
                        this.secondIndexlist[z].detailName ===
                        curentpageresource[index].dataDetailName
                      ) {
                        this.select2 = this.secondIndexlist[z].detailId;
                      }
                    }
                  }
                });
            }
          }
        } else {
          window.console.log("获取不到一级索引");
        }
      });
    },
    updateResourceIntro() {
      this.modal_loading = true;
      var formdata = new FormData();

      formdata.append("dataId", this.resourceId);
      if (this.dataname.length !== 0) {
        formdata.append("dataName", this.dataname);
      }
      if (this.select2.length !== 0) {
        formdata.append("detailId", this.select2);
      }
      if (this.dataIntroduce.length !== 0) {
        formdata.append("dataIntroduce", this.dataIntroduce);
      }
      // if (this.avatarimgFile) {
      //   formdata.append("photo", this.avatarimgFile);
      // }
      if (this.imglist.length !== 0) {
        for (var i in this.imglist) {
          formdata.append("photos", this.imglist[i].raw);
        }
      }
      var config = {
        onUploadProgress: progressEvent => {
          var complete =
            (((progressEvent.loaded / progressEvent.total) * 100) | 0) + "%";
          this.progress3 = complete;
        },
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      this.axios
        .post(UserApi.updateResourceDetail, formdata, config)
        .then(res => {
          if (res.data.status == 0) {
            window.console.log("修改结果", res);
            this.modal_loading = false;
            this.$message({
              type: "success",
              message: res.data.msg
            });
            this.SlectSearch();
            this.cancelUpdateIntro();
            //更新资源列表
          } else {
            this.modal_loading = false;
            this.$message({
              type: "error",
              message: res.data.msg
            });
          }
        });
    },
    cancelUpdateIntro() {
      this.modal4 = false;
      this.dataIntroduce = "";
      this.dataname = "";
      this.$refs.secondslect3.clearSingleSelect();
      this.$refs.secondslect4.clearSingleSelect();
      this.$refs.upload3.clearFiles();
      this.avatarimgFile = null;
      this.imageUrl = null;
      this.imglist = [];
      this.progress3 = 0;
      this.modal_loading = false;
    },
    uploadVersion() {
      //上传新版本
      this.modal2 = true;
    },
    uploadNew() {
      //开始上传
      this.modal_loading = true;
      var config = {
        onUploadProgress: progressEvent => {
          var complete =
            (((progressEvent.loaded / progressEvent.total) * 100) | 0) + "%";
          this.progress = complete;
        },
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      let param = new FormData();
      param.append("file2", this.file); //选择的文件
      param.append("versionName", this.versionnew); //新的版本号
      param.append("dataId", this.resourceId); //资源的id
      this.axios
        .post(UserApi.uploadResourceVersion, param, config)
        .then(res => {
          if (res.data.status == 0) {
            this.modal_loading = false;
            this.$Message.success("成功上传新版本");
            //清空内容
            this.cancelUpload();
            this.reloadVersion();
          } else {
            this.modal_loading = false;
            this.$Message.error("新版本上传失败");
          }
        });
    },
    cancelUpload() {
      this.modal2 = false;
      this.file = null;
      this.versionnew = "";
      this.progress = 0;
    },
    updateVersion() {
      this.modal_loading2 = true;
      var config = {
        onUploadProgress: progressEvent => {
          var complete =
            (((progressEvent.loaded / progressEvent.total) * 100) | 0) + "%";
          this.progress2 = complete;
        },
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      let param = new FormData();
      param.append("file", this.file2); //选择的文件
      param.append("versionId", this.versionId); //新的版本号
      this.axios.post(UserApi.changeVersion, param, config).then(res => {
        if (res.data.status == 0) {
          this.modal_loading2 = false;
          this.$Message.success("成功修改版本资源");
          //清空内容
          this.cancelUpdateVersion();
          this.reloadVersion();
        } else {
          this.modal_loading2 = false;
          this.$Message.error("修改版本资源失败");
        }
      });
    },
    cancelUpdateVersion() {
      this.file2 = null;
      this.modal3 = false;
      this.progress2 = 0;
    },
    handleUpload(file) {
      this.file = file;
      return false;
    },
    handleUpload2(file) {
      this.file2 = file;
      return false;
    },
    SelectValue3(e) {
      //获取筛选器一级索引选中值
      this.select1 = e;
      window.console.log(this.select1);
      //级联更新二级选择器
      this.axios
        .get(UserApi.secondIndex, {
          params: {
            detailCategoryId: this.select1
          }
        })
        .then(res => {
          if (res.data.status == 0) {
            this.secondIndexlist = res.data.data;
          }
        });
      this.$refs.secondslect4.clearSingleSelect();
    },
    SelectValue4(e) {
      //获取筛选器一级索引选中值
      this.select2 = e;
      window.console.log(this.select2);
    },
    // 选取图片后自动回调，里面可以获取到文件
    imgSaveToUrl(file) {
      // 也可以用file
      this.avatarimgFile = file.raw; // 或者 this.avatarimgFile=file.raw
      window.console.log(this.avatarimgFile);
      // 转换操作可以不放到这个函数里面，
      // 因为这个函数会被多次触发，上传时触发，上传成功也触发
      let reader = new FileReader();
      reader.readAsDataURL(this.avatarimgFile); // 这里也可以直接写参数file.raw

      // 转换成功后的操作，reader.result即为转换后的DataURL ，
      // 它不需要自己定义，你可以console.log(reader.result)看一下
      reader.onload = () => {
        // console.log(reader.result);
      };

      /* 另外一种本地预览方法 */
      let URL = window.URL || window.webkitURL;
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      return false;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    beforeimgUpload(file) {
      return false;
    },
    OnChangepic(file, fileList) {
      const isType = file.type === "image/jpeg" || "image/png";
      const isLt5M = file.size / 1024 / 1024 < 20;

      if (!isType) {
        this.$Message.error("上传头像图片只能是 JPG 格式!");
        fileList.pop();
      }
      if (!isLt5M) {
        this.$Message.error("上传头像图片大小不能超过 20MB!");
        fileList.pop();
      }
      this.imglist.push(file);
    }
  },
  mounted() {
    this.GetAllResource();
  },
  watch: {}
};
</script>
<style>
.resourcemanage {
  position: relative;
  width: 100%;
}
.title {
  font-size: 0.28rem;
  font-weight: 700;
  font-family: "PingFang";
}
.usercontent {
  border-radius: 0.1rem;
}
.adduser {
  display: inline;
}
.pagenation {
  margin-top: 0.2rem;
}

.tagslect1 {
  font-family: "PingFang";
  font-size: 0.14rem;
}
.tagslect2 {
  font-family: "PingFang";
  font-size: 0.14rem;
  margin-left: 10px;
}
.selectbtn {
  margin: 0 10px;
}
.choicefile {
  display: flex;
  justify-content: center;
  text-align: center;
  font-family: "PingFang";
}
.ptitles {
  text-align: center;
  font-size: 15px;
  line-height: 20px;
  height: 20px;
  margin-top: 20px;
  margin-bottom: 10px;
}
.notice {
  text-align: center;
  font-size: 12px;
  line-height: 15px;
  height: 15px;
  margin: 4px 0;
}
.modalfooter {
  display: flex;
  justify-content: center;
}
.uploadok {
  width: 200px;
  font-size: 18px;
}
.intro {
  width: 100%;
  display: flex;
  justify-content: center;
}
.progresstitle {
  margin-top: 0.2rem;
}
.progress {
  margin-top: 0.05rem;
  height: 0.3rem;
  line-height: 0.3rem;
  text-align: right;
  color: #ffffff;
  font-weight: bold;
  padding-right: 0.1rem;
}
.progresstitle2 {
  margin-top: 0.2rem;
}
.progress2 {
  margin-top: 0.05rem;
  height: 0.3rem;
  line-height: 0.3rem;
  text-align: right;
  color: #ffffff;
  font-weight: bold;
  padding-right: 0.1rem;
}
.avatar-uploader {
  margin: 0 auto;
  width: 148px;
  height: 148px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}
.avatarimg {
  width: 148px;
  height: 148px;
  display: block;
}
.imglist {
  width: 468px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.tags {
  display: flex;
  justify-content: center;
}
</style>
